<template>
<!-- 因产品列表样式在产品详情 文章详情均有，特意提出一个公共组件 -->
  <div > 
    <div class="productItem"  v-class2="'visible'"  :class="{'productItem_switch': item.color && item.color.length > 1}" v-for="(item, index) in data" :key="index" @click="goToDetail(item)">
      <div class="product_image" :style="'background-image:url('+item.curSpec.httpImage+')'" v-if="item.curSpec">
        <div class="switch_container" >
          <span @click.stop="prevImage(item)">
            <i class="iconfont icon-arrow_1_1"></i>
          </span>
          <span  @click.stop="nextImage(item)">
            <i class="iconfont icon-arrow_1_1"></i>
          </span>
        </div>
      </div>

      <div class="productItem_content">   
        <div class="comment"><el-rate v-model="item.star_comment" disabled show-score :score-template="item.all_comment_num +' reviews'" :colors="rateArray"></el-rate></div>
        <div class="colorList " v-if="item.color.length > 0" >
          <p  class="color" v-for="(spec, specItem) in item.color" :key="specItem"   
          :class="{'color_active': spec == item.curSpec.color, 'color_disabled': !colorToSize(item,spec)}" 
          :style="'background-color:' + spec" @click.stop="changeColor(item, spec)">
            <img :src="shadowImg" :lazy="true" class="svgHover icon-shade" v-show="!colorToSize(item,spec)">
          </p>
        </div>
      </div>

      <div class="specList"  v-if="item.specification.length > 0">
        <p class="spec" :class="{'spec_active': spec == item.curSpec.specification_name, 'diabled' : !sizeToColor(item, spec) }" 
        v-for="(spec, specItem) in item.specification" :key="specItem"  @click.stop="changeSpec(item, spec)">{{spec}} </p>
        </div> {{item.tag_type}}
      <p class="title">{{item.title}}</p>
      <p class="tag" v-if="item.tag_type">{{item.tag_type}}</p> 
        <!-- 自定义内容 -->
      <slot v-bind:item="item"> </slot> 
    
      <p class="collect"></p>
      <i class="iconfont icon-plus"  @click.stop="isBuyDialogShow(item)"></i>

    </div>
     <BuyDialog v-show="isBuy" :show="isBuy" :product="curProductItem" @closeDialog="isBuyDialogShow"></BuyDialog>
  </div>
    
</template>

<script>
import  BuyDialog from './isBuyDialog'
export default {
  components: { BuyDialog },
  data(){
    return {
      isBuy: false,
      curProductItem: {}
    }
  },
  props: {
    list: Array,
  },
  computed :{
    data (){
      let list = this.list
      for(let i = 0; i < list.length; i++){
         let data  = list[i].data
        if (list[i].star_comment == ''){
          list[i].star_comment = 0
        }
        if(list[i].tag_type == 1){ // 标签类型转换
          list[i].tag_type = 'NEW'
        } else if(list[i].tag_type == 2){
          list[i].tag_type = 'HOT'
        } else {
          list[i].tag_type = ''
        }
        list[i].curIndex = 0
        if(data.length > 0){
          list[i].curSpec = list[i].data[0]
        } else {
          list[i].curSpec = {}
        }
      }
      return list 
    }
  },
  methods: {
    isBuyDialogShow (item){ // 购买窗口是否显示
       this.isBuy = !this.isBuy
       if(this.isBuy){
         this.curProductItem = item
       }
    },
    goToDetail (item){
      this.$router.push({path: '/product/' + item.set_link})
    },
    prevImage (item) { // 产品里的图片切换
      let lenColor = item.color.length -1
      if(item.curIndex  > 0){
        item.curIndex = item.curIndex-1
      } else {
        item.curIndex = lenColor
      }
      
      this.changeColor(item, item.color[item.curIndex])

    },
    nextImage (item){// 产品里的图片切换
       let lenColor = item.color.length -1
      if(item.curIndex  < lenColor){
        item.curIndex = item.curIndex +1
      } else {
        item.curIndex = 0
      }
      this.changeColor(item, item.color[item.curIndex])
    },
       colorToSize (item, color){
      let data = item.data
      let m =  data.filter(d=>{
        return d.specification_name == item.curSpec.specification_name  && d.color == color
      })
      return m.length > 0
    },
    sizeToColor (item, size) {
      let data = item.data
      let m =  data.filter(d=>{
        return d.color == item.curSpec.color  && d.specification_name == size
      })
      return m.length > 0
    },
    changeColor (item, color) {
      let isExit = false
      let specData = item.data
      for(let i = 0; i < specData.length; i++ ){
        if(specData[i].color == color){
          if (item.curSpec.specification_name == specData[i].specification_name) {
            item.curSpec = specData[i]
            isExit = true
          }
        }
      }
      if (!isExit) {
        for(let i = 0; i < specData.length; i++ ){
          if(specData[i].color == color){
            item.curSpec = specData[i];
            break;
          }
        }
      }
    },
    changeSpec (item, size){
      let specData = item.data
      let isExit =  false
      for(let i = 0; i < specData.length; i++ ){
        if(specData[i].specification_name == size){
          if (item.curSpec.color == specData[i].color) {
            item.curSpec = specData[i]
            isExit = true
          }
        }
      }

      if(!isExit) {
        for(let i = 0; i < specData.length; i++ ){
          if(specData[i].specification_name == size){
            item.curSpec = specData[i];
             break;
          }
        }
      }
    },
  }

}
</script>

<style lang="scss">
@import './index.scss';
</style>